<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <textarea id="nameList"></textarea>
    <table>
        <thead>
            <tr>
                <td>日期</td>
                <td>查看</td>
            </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>

    <script>
        const date = new Date();
        const hour = date.getHours();
        const tbody = document.getElementById("tbody")
        const nameList = document.getElementById("nameList")
        nameList.value = localStorage.getItem("nameList");
        const createCanvas = (data, sum, nameObj, time) => {

            const canvas = document.createElement("canvas")
            canvas.width = 1350;
            const total = data.length;
            canvas.height = total * 50 + 60;
            const width = canvas.width;
            const height = canvas.height
            const car = canvas.getContext("2d");
            car.font = "24px Arial"
            const fillLine = (x, y, x1, y1) => {
                car.beginPath()
                car.moveTo(x, y);
                car.lineTo(x1, y1);
                car.stroke();
                car.closePath()
            }
            const fillCenterText = (text, x, y) => {
                const align = car.textAlign;
                const baseLine = car.textBaseline
                car.textAlign = "center"
                car.textBaseline = "middle"
                car.fillText(text, x, y);
                car.textAlign = align;
                car.textBaseline = baseLine
            }
            const fillTr = (
                line,
                beginX,
                beginY,
                height
            ) => {
                const width = 240
                for (let i = 0; i < line.length; i++) {
                    const x = beginX + i * width;
                    fillCenterText(line[i], x + width / 2, beginY + height / 2);
                    fillLine(x + width, beginY, x + width, beginY + height)
                    fillLine(x, beginY + height, x + width, beginY + height)
                }
            }
            fillLine(0, 0, width, 0)
            fillLine(0, 0, 0, height)
            fillLine(0, height, width, height)
            fillLine(width, height, width, 0)

            fillCenterText(time, 75, height / 2)
            const beginX = 150
            fillLine(beginX, 0, beginX, height)

            fillLine(beginX, 60, width, 60)

            fillTr(
                ["姓名", "ID", "审核量", "小时审核量", "违规量"],
                beginX,
                0,
                60
            )
            let i = 0;
            for (const item of data) {
                const { id, handler, other_num, evil_num, pass_num, source, total_num, source_desc } = item;
                fillTr(
                    [nameObj[handler], handler,
                    sum[handler].total_num,
                        total_num,
                        evil_num
                    ],
                    beginX,
                    i * 50 + 60,
                    50
                )
                i++;
            }
            return canvas;
        }
        const compute = (item, data) => {
            const date = new Date(item.date);
            const obj = {};
            data.forEach(line => {
                line.works.forEach(({ handler, evil_num, pass_num, other_num, total_num }) => {
                    if (!obj[handler]) {
                        obj[handler] = {
                            pass_num: 0,
                            other_num: 0,
                            total_num: 0,
                            evil_num: 0
                        }
                    }
                    obj[handler].pass_num += pass_num;
                    obj[handler].other_num += other_num;
                    obj[handler].total_num += total_num;
                    obj[handler].evil_num += evil_num;
                })
            })
            const h = `0${date.getHours()}`.slice(-2);
            const dataObj = {};
            for (const { id, handler, other_num, evil_num, pass_num, source, total_num, source_desc } of item.works) {
                if (!dataObj[handler]) {
                    dataObj[handler] = {
                        other_num: 0,
                        evil_num: 0,
                        pass_num: 0,
                        total_num: 0,
                        handler
                    }
                }
                dataObj[handler].other_num += other_num;
                dataObj[handler].pass_num += pass_num;
                dataObj[handler].total_num += total_num;
                dataObj[handler].evil_num += evil_num;
            }
            const nameStr = nameList.value;
            localStorage.setItem("nameList", nameList.value)
            const arr = nameStr.split("\n").map(e => e.split("\t"));
            const nameObj = arr.reduce((acc, [name, id]) => {
                if (!name || !id) return acc;
                acc[id] = name;
                return acc;
            }, {});
            const url = createCanvas(Object.values(dataObj), obj, nameObj, `${h}:00-${h}:59`).toDataURL("jpg");
            window.open(url);

        }
        for (let i = 0; i < hour; i++) {
            const tr = document.createElement("tr");
            const dateDom = document.createElement("td")
            dateDom.innerText = `${i}-${i + 1}`;
            tr.appendChild(dateDom);
            const eventDom = document.createElement("td");
            const btn = document.createElement("button");
            eventDom.appendChild(btn);
            tr.appendChild(eventDom);
            btn.innerText = "查看"
            btn.onclick = () => {
                const hour = `0${i}`.slice(-2);
                const baseDate = `${date.getFullYear()}-${`0${date.getMonth() + 1}`.slice(-2)}-${`0${date.getDate()}`.slice(-2)}`;
                const start_time = `${baseDate} ${hour}:00:00`;
                const end_time = `${baseDate} ${hour}:59:59`;
                const body = new FormData();
                body.append("start_time", start_time);
                body.append("end_time", end_time)
                fetch(decodeURIComponent(`/workload/time?start_time=${start_time}&end_time=${end_time}`), {
                    method: "GET",
                    headers: {
                        'Content-Type': 'application/json',
                    },
                }).then(e => e.json()).then((e) => {
                    const last = e[e.length - 1];
                    compute(last, e);
                })
            }
            tbody.appendChild(tr)
        }
    </script>
</body>

</html>